<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>欢迎页</title>
    <link rel="stylesheet" type="text/css" href="/static/js/plugins/jquery-easyui/themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="/static/js/plugins/jquery-easyui/themes/icon.css">
    <script type="text/javascript" src="/static/js/plugins/jquery-easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/plugins/jquery-easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/static/js/plugins/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
    <link rel="stylesheet" href="../frame/layui/css/layui.css">
    <link rel="stylesheet" href="../frame/static/css/style.css">
    <link rel="icon" href="../frame/static/image/code.png">
    <script type="text/javascript" src="/static/js/system/saleAnalyze.js"></script>
</head>
<body class="body">

<div class="layui-row layui-col-space10 my-index-main">



    <!--
        <div id="dic_layout" class="easyui-layout" fit="true">
            <div data-options="region:'east',split:true,title:'销售数据'" style="width:720px;">
                <table id="sale_datagrid"></table>

            </div>
        </div>-->


    <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">销售报表</h2>
                <div class="layui-colla-content layui-show">

                    <div id="main-line" style="height: 550px"></div>

                </div>
            </div>
        </div>
    </div>

    <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">用户访问来源统计</h2>
                <div class="layui-colla-content layui-show">

                    <div id="main-line2" style="height: 550px"></div>

                </div>
            </div>
        </div>
    </div>


    <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
        <div class="layui-collapse">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">消费人群</h2>
                <div class="layui-colla-content layui-show">

                    <div id="main-line3" style="height: 550px"></div>

                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="../frame/layui/layui.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
<script type="text/javascript" src="../frame/echarts/echarts.min.js"></script>
<script type="text/javascript">
    layui.use(['element', 'form', 'table', 'layer', 'vip_tab'], function () {
        var form = layui.form
            , table = layui.table
            , layer = layui.layer
            , vipTab = layui.vip_tab
            , element = layui.element
            , $ = layui.jquery;

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main-line'));

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption({
            title : {
                text: '销售报表',
                subtext: '数据对比'
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['商品','业务']
            },
            toolbox: {
                show : true,
                feature : {
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : ['一季度','二季度','三季度','四季度']
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'商品',
                    type:'bar',
                    data:[12.0, 43.9, 25.6, 56.7],
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    }
                },
                {
                    name:'业务',
                    type:'bar',
                    data:[22.6, 15.9, 70.7, 48.7],
                    markPoint : {
                        data : [
                            {name : '年最高', value : 70.7, xAxis: 7, yAxis: 183},
                            {name : '年最低', value : 15.9, xAxis: 11, yAxis: 3}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name : '平均值'}
                        ]
                    }
                }
            ]
        });


        // you code ...


    });
</script>
<script type="text/javascript">
    layui.use(['element', 'form', 'table', 'layer', 'vip_tab'], function () {
        var form = layui.form
            , table = layui.table
            , layer = layui.layer
            , vipTab = layui.vip_tab
            , element = layui.element
            , $ = layui.jquery;

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main-line2'));

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption({
            title: {
                text: '用户访问来源',
                subtext: '真实数据',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['直接访问', '邮件营销', '报纸广告', '视频广告', '搜索引擎']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        {value: 335, name: '直接访问'},
                        {value: 310, name: '邮件营销'},
                        {value: 234, name: '报纸广告'},
                        {value: 135, name: '视频广告'},
                        {value: 1548, name: '搜索引擎'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        })


    });
</script>
<script type="text/javascript">
    layui.use(['element', 'form', 'table', 'layer', 'vip_tab'], function () {
        var form = layui.form
            , table = layui.table
            , layer = layui.layer
            , vipTab = layui.vip_tab
            , element = layui.element
            , $ = layui.jquery;

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main-line3'));

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption({
            title: {
                text: '消费人群',
                subtext: '数据来自门店统计'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['上半年', '下半年']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: ['工人','军人','学生','少妇','白领','总人数(百)']
            },
            series: [
                {
                    name: '上半年',
                    type: 'bar',
                    data: [182, 234, 290, 1049, 1317, 6302]
                },
                {
                    name: '下半年',
                    type: 'bar',
                    data: [193, 234, 310, 1215, 1341, 6818]
                }
            ]
        });


    });
</script>
</body>
</html>